<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <el-upload
        drag
        accept=".xls, .xlsx"
        action=""
        :limit="1"
        :http-request="handleChange"
        :file-list="fileList">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
  </div>
</template>

<script>
import Worker from '@/utils/excel.worker.js'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleChange({file}) {
      let worker = new Worker();
      console.log('---------------', file)
      console.log(worker)
      worker.postMessage(file)
      worker.onmessage = (event) => {
        console.log('---------------', event)
        const jsonData = event.data;
        console.log(jsonData);
        // worker.terminate()
      };
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
